<template>
    <div class="newsDetails">
      <div class="newsDetails-main">
        <div class="newsDetails-crumbs">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/news' }">行业资讯</el-breadcrumb-item>
            <el-breadcrumb-item>{{initInfo.title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="newsDetails-title">
          <h1>{{initInfo.title}}</h1>
          <p>{{initInfo.created_at}}</p>
        </div>
        <div class="newsDetails-content">
          <div class="newsDetails-content-left">
            <div v-html="initInfo.intro">{{initInfo.intro}}</div>
          </div>
          <div class="newsDetails-content-right">
            <div v-for="(item,index) in newsList" :key="index" @click="toNewsList(item.id)">
              <img :src="$api.picPre + item.pic" alt="">
              <p>{{item.title}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      id: '',
      initInfo: {},
      newsList: []
    }
  },
  methods: {
    toNewsList (id) {
      this.id = id
      this.getInfo()
    },
    getInfo () {
      this.$ajax
        .post(this.$api.infoDetail, {
          id: this.id
        })
        .then(res => {
          console.log(res)
          this.initInfo = res.detail
          this.newsList = res.list
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    }
  },
  created () {
    this.id = this.$route.params.id
    this.getInfo()
  },
  beforeCreate () {
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0)
    })
  }
}
</script>

<style scoped lang="scss">
.newsDetails{
  padding-top: 454px;
  background-image: url('../../assets/img/headerImg.png');
  background-size:100%;
  background-repeat:no-repeat;
  .newsDetails-main{
    width: 1200px;
    margin: 0 auto 123px;
    background:rgba(255,255,255,1);
    box-shadow:0px 8px 38px 0px rgba(4,0,0,0.15);
    .newsDetails-crumbs{
      padding: 20px;
      border-bottom: 1px solid #EEEEEE;
    }
    .newsDetails-title{
      width: 860px;
      text-align: center;
      padding-top: 87px;
      h1{
        color: #323232;
        font-size: 24px;
        margin-bottom: 20px;
      }
      p{
        color: #969696;
        font-size: 14px;
      }
    }
    .newsDetails-content{
      @include flex_content;
      .newsDetails-content-left{
        width: 860px;
        padding: 50px 43px 107px 45px;
        border-right: 1px solid #EEEEEE;
        box-sizing: border-box;
      }
      .newsDetails-content-right{
        padding: 50px 45px 0 44px;
        div{
          padding-bottom: 30px;
          margin-bottom: 30px;
          border-bottom: 1px solid #EDEDED;
          cursor: pointer;
          img{
            width: 250px;
            height: 145px;
          }
          p{
            color: #323232;
            font-size: 14px;
            margin-top: 19px;
          }
        }
      }
    }
  }
}
</style>
